<template>
	<view class="holper-bg">
		<!-- 自定义状态栏 -->
		<view class="navbar" :style="{backgroundColor:backgroundColor}">
			<mo-status-bar></mo-status-bar>
			<view class="navbar-wrap">
				<view class="navbar-left" @tap="onClickLeft">
					<view class="iconwrap" :style="{backgroundColor:iconColor}"><uni-icons :color="color" type="arrowleft" size="22" /></view>
				</view>
				<view class="navbar-title"><text :style="{color:color}">时间轴</text></view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<view class="header-wrap">
			<swiper @change="swiperChange" :style="{transform:transform}" :current="current" class="speedSwiper" circular="true">
				<swiper-item v-for="(item, index) in list" :key="index">
					<view :class="item.colorClass" class="swiper-item"><image class="speedImage" :src="item.url" mode="aspectFill" /></view>
				</swiper-item>
			</swiper>
			<view class="status">进行中</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'speedHeader',
		components: {
		},
		props: {
			list: {
				type: Array,
				default: ()=>[]
			},
			current: {
				type: Number,
				default: 0
			},
			scrollTop: {
				type: Number,
				default: 0
			},
		},
		data(){
			return {
				httpsUrl: '',
			}
		},
		computed: {
			transform(){
				if(this.scrollTop > 160) return
				const dy = this.scrollTop/2
				return `translateY(${dy}rpx)`
			},
			aph(){
				const aph = (this.scrollTop - 100 + 100) / 100
				return aph  > 1 ? 1 : (aph < 0 ? 0 : aph)
			},
			color(){
				return `rgba(255,255,255, 1)`
			},
			backgroundColor(){
				return `rgba(235, 115, 0, ${this.aph})`
			},
			iconColor(){
				const aph = (1 - this.aph) * 0.3
				return `rgba(0, 0, 0, ${aph})`
			},
		},
		created(){
			this.httpsUrl = this.$httpsUrl
		},
		methods: {
			swiperChange(el){
				const index = el.detail.current
				this.$emit('update:current',index)
				this.$emit('change', el)
			},
			onClickLeft(){
				uni.navigateBack({
				  complete: (res) => {},
				  delta: 0,
				  fail: (res) => {},
				  success: (res) => {},
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
.holper-bg{
	background: #eee;
}
.header-wrap{
	height: 400rpx;
	width: 100%;
	position: relative;
}
.speedSwiper{
	height: 100%;
}
.swiper-item{
	height: 100%;
}
.speedImage{
	height: 100%;
	width: 100%;
}
.status{
	font-size: 26rpx;
	position: absolute;
	right: 0;
	bottom: 50rpx;
	padding: 15rpx 30rpx;
	color: #fff;
	background-color: rgba($color: #000, $alpha: .3);
	border-radius: 50rpx 0 0 50rpx;
}
.navbar{
	position: fixed;
	top: 0;
    left: var(--window-left);
    right: var(--window-right);
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 998;
    -webkit-transition-property: all;
    transition-property: all;
	.iconwrap{
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		background: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	&-wrap{
		display: flex;
		align-items: center;
		width: 100%;
		/* #ifdef APP-PLUS */
		font-size: 34rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		font-size: 32rpx;
		/* #endif */
		height: 44px;
		height: calc(44px + constant(safe-area-inset-top));
		height: calc(44px + env(safe-area-inset-top));
		// padding: 7px 3px;
		// padding-top: calc(7px + constant(safe-area-inset-top));
		// padding-top: calc(7px + env(safe-area-inset-top));
		
	}
	&-left,&-right{
		width: 100rpx;
		padding: 0 10rpx;
	}
	&-title{
		flex: 1;
		text-align: center;
		// height: 44px;
		// line-height: 44px;
		/* #ifdef APP-PLUS */
		/* #endif */
		
		position: absolute;
		left: 90rpx;
		right: 90rpx;
		min-width: 0;
		-webkit-user-select: auto;
		user-select: auto;
	}
}
</style>
